<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="../css/reset.css">
	<style type="text/css">
		.a1 {
			width: 1350px;
			background-color:black;
			display: flex;

			
		}
		.a2 {
			margin: 0;
			padding: 0;
			width: 177px;
			height: 700px;
			position: absolute;
			background-color: black;
		}

		.a2 .container {
			position: relative;
			padding: 0;
			line-height: 100%;
		}
		.p1 {
			background-color:black;
			height: 20px;
			width: 300px;
		}

		.k8 {
			margin-left: 480px;
			height: 30px;
			line-height: 30px;
		}

		.k9 {
			width: 400px;
			background-color: black;
		}

		.k9 i {
			color: #0D6EFD;
			line-height: 30px;
		}

		iframe {
			float: right;
		}

		#menu {
            width: 175px;
        }

        #menu>h2 {
            margin: 0;
            padding: 10px;
            background-color: black;
            position: relative;
            display: flex;
        }

        #menu>ul {
            display: none;
        }

        #menu>h2>p {
            position: absolute;
            margin-left: 40px;
            margin-top: 6px;
        }

        #menu li {
            padding: 8px;
            background-color: #666;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }

        #menu li:hover {
            background-color:blue;
        }
	</style>
</head>

<body>
	<table border="1px" cellspacing="0" style="font-size: 3px; width: 1530px;">
		<tr>
			<td class="p1" style="font-size: 20px;">
				&times
			</td>
			<td class="a1">
				<div class="k9">
					<i class="bi bi-text-left" style="font-size: 20px;"></i>
				</div>
				<img src="../img/u26.svg" style="width: 20px;height: 20px;">
				<h5 style="width: 400px;color: aliceblue; line-height: 25px;">建设工程项目管理平台</h5>
				<div class="k8" style="font-size: 15px;">
					<i class="bi bi-receipt"></i>
					<i class="bi bi-three-dots-vertical"></i>
				</div>
			</td>
		</tr>
		<tr>
			<td class="a2">
				<div id="menu">
					<h2><img src="../img/u26.svg" style="width: 60px; height: 60px;"></h2>
					<h2>
						<img src="../img/u42.svg" alt="">
						<p>仪表盘</p>
					</h2>
					<ul>
						<li id="kc2"> <img src="../img/u101.svg" alt=""> <span target="iframe_a"> 项目看板</span></li>
						<li id="kc3"> <img src="../img/u101.svg" alt=""> <span target="iframe_a"> 工作台</span></li>
					</ul>
					<h2><img src="../img/u46.svg" alt="">
						<p>项目管理</p>
					</h2>
					<ul>
						<li id="kk2"><img src="../img/u101.svg" alt=""> <span target="iframe_a"> 项目信息登记</span></li>
						<li id="kk3"><img src="../img/u101.svg" alt=""><span target="iframe_a"> 项目信息审核</span></li>
						<li id="kk4"><img src="../img/u101.svg" alt=""><span target="iframe_a"> 项目信息列表</span></li>
						<li id="kk5"><img src="../img/u101.svg" alt=""><span target="iframe_a"> 项目信息维护</span></li>
			
					</ul>
			
					<h2><img src="../img/u66.svg" alt="">
						<p>合同管理</p>
					</h2>
					<ul>
						<li id="km1"><img src="../img/u101.svg" alt=""><span target="iframe_a"> 合同信息登记</span></li>
						<li id="km2"><img src="../img/u101.svg" alt=""><span target="iframe_a"> 合同信息审核</span></li>
						<li id="km3"><img src="../img/u101.svg" alt=""><span target="iframe_a"> 合同信息列表</span></li>
					</ul>
					<h2><img src="../img/u83.svg" alt="">
						<p>资金管理</p>
					</h2>
					<ul>
						<li id="kn1"><img src="../img/u101.svg" alt=""><span target="iframe_a"> 资金支付申请</span></li>
						<li id="kn2"><img src="../img/u101.svg" alt=""><span target="iframe_a"> 资金支付审核</span></li>
						<li id="kn3"><img src="../img/u101.svg" alt=""><span target="iframe_a"> 资金支付确认</span></li>
					</ul>
					<h2><img src="../img/u104.svg" alt="">
						<p>其他</p>
					</h2>
					<ul>
						<li id="kq1"><img src="../img/u101.svg" alt=""><span target="iframe_a"> 文件管理</span></li>
						<li id="kq2"><img src="../img/u101.svg" alt=""><span target="iframe_a"> 日志管理</span></li>
					</ul>
				</div>
				
			</td>
			<td>
				<iframe width="1350px" height="700px" src="xiangmuxingxidengji.html" frameborder="0" id="d1"></iframe>
			</td>
		</tr>
	</table>
	<script src="../js/jquery-3.6.4.js"></script>
    <script>
        $('#menu>h2').click(function () {
            //slide:滑动 带有动画
            //参数1：动画时长，单位毫秒 1000毫秒 = 1秒
            $(this).next().stop().slideToggle(1000)

            //动画队列设定：东湖呀未结束前 触发新的动画 ，会排队依次执行
            //
        })
    </script>
	<script>
		kk2.onclick = function (e) {
			e.preventDefault()//不让a标签跳转
			document.getElementById('d1').src = "xiangmuxingxidengji.html"
		}
		kk3.onclick = function (e) {
			e.preventDefault()//不让a标签跳转
			document.getElementById('d1').src = "xiangmuxingxishenghe.html"
		}
		kk4.onclick = function (e) {
			e.preventDefault()//不让a标签跳转
			document.getElementById('d1').src = "xiangmuxingxiliebiao.html"
		}
		kk5.onclick = function (e) {
			e.preventDefault()//不让a标签跳转
			document.getElementById('d1').src = "xiangmuxingxiweihu.html"
		}
		km1.onclick = function (e) {
			e.preventDefault()//不让a标签跳转
			document.getElementById('d1').src = "hetongxingxidengji.html"
		}
		km2.onclick = function (e) {
			e.preventDefault()//不让a标签跳转
			document.getElementById('d1').src = "hetongxingxishenghe.html"
		}
		km3.onclick = function (e) {
			e.preventDefault()//不让a标签跳转
			document.getElementById('d1').src = "hetongxingxiliebiao.html"
		}
		kn1.onclick = function (e) {
			e.preventDefault()//不让a标签跳转
			document.getElementById('d1').src = "zijinzifushengqing.html"
		}
		kn2.onclick = function (e) {
			e.preventDefault()//不让a标签跳转
			document.getElementById('d1').src = "zijinzifushenghe.html"
		}
		kn3.onclick = function (e) {
			e.preventDefault()//不让a标签跳转
			document.getElementById('d1').src = "zijinzifuqueren.html"
		}
		kc2.onclick = function (e) {
			e.preventDefault()//不让a标签跳转
			document.getElementById('d1').src = "xiangmukanban.html"
		}
		kc3.onclick = function (e) {
			e.preventDefault()//不让a标签跳转
			document.getElementById('d1').src = "gongzuotai.html"
		}
		kq1.onclick = function (e) {
			e.preventDefault()//不让a标签跳转
			document.getElementById('d1').src = "wenjianguanli.html"
		}
		kq2.onclick = function (e) {
			e.preventDefault()//不让a标签跳转
			document.getElementById('d1').src = "rzhiguanli.html"
		}
	</script>
</body>

</html>